<template>
  <div class="mainConImport">
    <!-- <p>数据上传中</p> -->
    <div class="mainConImportProgress">
      <div class="mainConImportProgressBack">
        <span :style="{ width: progress + '%' }"></span>
      </div>
      <div class="mainConImportProgressPresent" v-if="progress < 100">
        已上传{{ progress }}%
      </div>
      <div class="mainConImportProgressPresent" v-if="progress >= 100">
        上传成功
      </div>
      <div class="mainConImportProgressPresent" v-if="isError && progress > 89">
        上传失败
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: null,
      progress: this.progres,
      initTime: this.initTimes,
    }
  },
  props: {
    progres: {
      type: Number,
      default: 0,
    },
    initTimes: {
      type: Number,
      default: 70, //上传进度增长周期
    },
    speed: {
      type: Number,
      default: 1, //每次更新百分比
    },
    finished: {
      type: Boolean,
      default: false, //是否确认完成进度条，为false则会在maxSlow值处暂停，直到后台返回结果，完成进度条，可根据finished值修改模拟上传速度
    },
    isError: {
      type: Boolean,
      default: false,
    },
    minSlow: {
      type: Number,
      default: 60, //模拟上传，完成60%后，且上传完成90%之前 开始降低上传速度
    },
    maxSlow: {
      type: Number,
      default: 90, //模拟上传，完成90%后暂停上传，等待后台返回结果。
    },
  },
  watch: {
    progress(val) {
      if (val >= 100) {
        setTimeout(() => {
          this.$emit('isFinished', 100)
        }, 100)
      }
    },
    progres(val) {
      this.progress = val
    },
  },
  methods: {
    getRandom() {
      let times = new Date().getTime()
      if (times % 2 === 0) {
        return -1
      } else {
        return 1
      }
    },
    setProgress() {
      this.timer = setTimeout(() => {
        this.progress += this.speed
        this.setProgress()
        if (this.progress > this.minSlow && this.progress < this.maxSlow) {
          if (!this.finished) {
            this.initTime += 4
          } else {
            //此处可重置上传进度增长周期
          }
        }
        if (this.progress > this.maxSlow) {
          if (this.isError) {
            this.$emit('isFinished', this.progress)
            clearTimeout(this.timer)
            this.timer = null //清除定时器，避免导致内存溢出
            return
          }
          if (!this.finished) {
            this.progress = this.maxSlow + 1
          } else {
            if (this.progress > 99) {
              clearTimeout(this.timer)
              this.timer = null //清除定时器，避免导致内存溢出
            }
          }
        }
      }, this.initTime)
    },
  },
}
</script>
<style lang="less" scoped>
.mainConImport {
  &Progress {
    height: 60px;

    &Back {
      margin: 0 auto;
      height: 20px;
      max-width: 1000px;
      background-color: #ebeef5;
      border-radius: 12px;
      border-radius: 12px;
      padding: 0 15px;
      span {
        display: inline-block;
        height: 12px;
        background-image: linear-gradient(270deg, #33bea6 0%, #c8f1d5 100%);
        border-radius: 12px;
        border-radius: 12px;
      }
    }
    &Present {
      line-height: 16px;
      font-size: 16px;
      text-align: center;
      color: #333;
      margin-top: 15px;
    }
  }
}
</style>
